<template>
  <div class="container">
    <div class="content">
      <div class="content-inner">
        <a-grid :cols="24" :col-gap="16" :row-gap="16">
          <a-grid-item
            :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
            class="a-grid-item"
          >
            <img src="../../assets/images/bg.png" />
          </a-grid-item>
          <a-grid-item
            :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
            class="a-grid-item"
          >
            <LoginForm class="loginform" />
          </a-grid-item>
        </a-grid>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Footer from '@/components/footer/index.vue';
  import LoginBanner from './components/banner.vue';
  import LoginForm from './components/login-form.vue';
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    height: 100vh;
    background-image: url('../../assets/images/bgi.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    .content {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      .content-inner {
        flex: 0.6;
        img {
          width: 25rem;
        }
        .a-grid-item {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
</style>

<style lang="less" scoped>
  // responsive
  @media (max-width: @screen-lg) {
    .container {
      .banner {
        width: 25%;
      }
    }
  }
</style>
